// ************************************************判断本地是否有token
// 没有token的时候跳转到登录页面
if (localStorage.getItem("token") == null) {
  location.href = "/login.html"
}

layui.use('layer', function () {

  let layer = layui.layer;
  list();
  //****************************************************************************************************新增
  $(".new-todo").on("keydown", function (e) {
    //  2.键盘码：事件对象。e.keyCode
    //  3.当13的时候特别对待
    if (e.keyCode == 13) {
      // 4.页面有反应：用户输入的内容有放入下方；
      //    4.1 获取用户输入输入框的内容
      let val = $(".new-todo").val();
      if (val == "") {
        layer.msg("计划不能为空")
        return;
      }
      $.ajax({
        type: "POST",
        url: "/todo/add ",
        data: {
          content: val,
          isdone: 0,
        },
        success: function (res) {
          layer.msg(res.message);
          if (res.status == 0) {
            $(".new-todo").val("");
            list();
          }
        }
      })

    }
  });

  // ***************************************************************************************************列表
  function list() {
    $.ajax({
      type: "GET",
      url: "/todo/list",
      success: function (res) {
        if (res.status == 0) {
          let str = "";

          $("ul").html(str);
          // console.log();
          res.data.forEach(ele => {
            str += `<li class=${ele.isdone==1?"completed":""}>
              <div class="view">
                <input class='toggle' isd=${ele.id} type="checkbox" ${ele.isdone==1?"checked":""} >
                <label>${ele.content}</label>
                <button class="destroy" del=${ele.id}></button>
              </div>
              <input class="edit" eid=${ele.id} value="Create a TodoMVC template">
              </li>`;
          });
          $("ul").append(str); //   4.2.3 添加到ul   【需要记住语法：添加语法 父级JQ.append(新JQ);    JQ.prepend(新JQ)   兄弟元素.before()  after】

        }
      }
    })
    $(".new-todo").val("")
  }

  // ***************************************************************************************************删除
  $("ul").on("click", ".destroy", function () {
    let id = $(this).attr("del")
    console.log(id);
    $.ajax({
      type: "GET",
      url: "/todo/del/" + id,
      success: function (res) {
        layer.msg(res.message);
        if (res.status == 0) {
          list();
        }
      }
    });

  })
  // 需求：用户对 中间文字 双击 ，当前整个li添加一个样式 editng
  //                             中间文字----->跑到了新出来input
  // 步骤：
  //     1.
  $("ul").on("dblclick", "label", function () {
    // 1.给父级添加类名
    $(this).parents("li").addClass("editing");


    // 2.中间文字  跑到  了新出来input
    let str = $(this).text(); // 【回扣：记忆不牢,查询筛选】

    // 3.找父级下一个兄弟   
    $(this).parent().next().val(str);

  });

  // 需求： 用户对谁？发生什么行为？很多谁它怎么了？用户对input，失去焦点行为，li去掉样式
  //                                                         输入框  跑到 文字部分
  $("ul").on("blur", ".edit", function () {
    // 1.li去掉样式
    $(this).parent().removeClass("editing");

    // 2. 输入框的值  跑到  文字部分
    let str = $(this).val();

    $(this).prev().find("label").text(str);
    let id = $(this).attr("eid");
    $.ajax({
      type: "POST",
      url: "/todo/edit",
      data: ({
        id: id,
        content: str,
      }),
      success: function (res) {
        layer.msg(res.message);

      }
    })

  })


  // ***************************************************************************************************更新
  $("ul").on("click", ".toggle", function () {
    $(this).parents("li").toggleClass("completed")
    let id = $(this).attr("isd");
    $.ajax({
      type: "POST",
      url: "/todo/edit",
      data: ({
        id: id,
        isdone: $(this).prop("checked") ? 1 : 0,
      }),
      success: function (res) {
        layer.msg(res.message);

      }
    })
  })



})